<template>
  <view class="template-preferred tn-safe-area-inset-bottom">
    <tn-nav-bar fixed alpha customBack>
    	<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
    		<text class='icon tn-icon-left'></text>
    	</view>
    </tn-nav-bar>

    <view class="" v-if="current==0">
      <!-- 我已报名的校友会活动列表 -->
      <view class="activity-list tn-margin">
        <!-- 页面标题区域 -->
        <view class="page-header">
          <view class="header-content">
            <view class="header-title-wrap">
              <view class="header-title">我已报名的校友会活动</view>
              <view class="header-subtitle">共 {{filteredActivities.length}} 场活动</view>
            </view>

          </view>
          
          <!-- 校友会活动列表项（支持单/双列切换） -->
          <!-- 单列表格 -->
          <view class="activity-items list-layout" v-if="listLayout === 'list'">
            <view v-for="(item, index) in filteredActivities" :key="index" 
              class="activity-item tn-bg-white tn-radius tn-margin-bottom-sm tn-shadow-sm"
              @click="tn('/circlePages/details', {id: item.id})">
              <!-- 图片占据整个活动项宽度 -->
              <view class="item-image full-width">
                <image :src="item.coverImage" mode="aspectFill" class="cover-image"></image>
                <!-- 修改后（正确） -->
                <view class="activity-tag" 
                  :class="{
                    'tag-ongoing': item.status === 'ongoing',
                    'tag-upcoming': item.status === 'upcoming',
                    'tag-ended': item.status === 'ended'
                  }">
                  {{ item.status === 'ongoing' ? '活动中' : item.status === 'upcoming' ? '未开始' : '已结束' }}
                </view>
              </view>
              <!-- 文字信息在图片下方 -->
              <view class="item-info tn-padding-sm">
                <view class="info-title tn-text-bold tn-text-base tn-margin-bottom-xs">{{ item.title }}</view>
                <view class="info-meta tn-flex tn-flex-row-between tn-text-xs tn-color-gray">
                  <view class="meta-date">
                    <text class="tn-icon-calendar tn-margin-right-xs"></text>
                    {{ item.dateRange }}
                  </view>
                  <view class="meta-location">
                    <text class="tn-icon-map tn-margin-right-xs"></text>
                    {{ item.location }}
                  </view>
                </view>
                <view class="info-stats tn-flex tn-flex-row-between tn-margin-top-xs">
                  <view class="stats-participants tn-text-xs tn-color-gray">
                    <text class="tn-icon-people tn-margin-right-xs"></text>
                    {{ item.participantCount }}人报名
                  </view>
                  <view class="stats-category tn-bg-gray--light tn-round-sm tn-padding-xs tn-text-xs">
                    {{ item.categoryName }}
                  </view>
                </view>
              </view>
            </view>
          </view>
          
          <!-- 双列表格 -->
          <view class="activity-items grid-layout tn-flex tn-flex-wrap" v-if="listLayout === 'grid'">
            <view v-for="(item, index) in filteredActivities" :key="index" 
              class="grid-item tn-bg-white tn-radius tn-margin-bottom-sm tn-shadow-sm"
              @click="tn('/circlePages/details', {id: item.id})">
              <!-- 图片占据整个网格项宽度 -->
              <view class="grid-image-container full-width">
                <image :src="item.coverImage" mode="aspectFill" class="grid-image"></image>
               <!-- 修改后（正确） -->
               <view class="activity-tag" 
                 :class="{
                   'tag-ongoing': item.status === 'ongoing',
                   'tag-upcoming': item.status === 'upcoming',
                   'tag-ended': item.status === 'ended'
                 }">
                 {{ item.status === 'ongoing' ? '活动中' : item.status === 'upcoming' ? '未开始' : '已结束' }}
               </view>
              </view>
              <!-- 文字信息在图片下方 -->
              <view class="grid-info tn-padding-sm">
                <view class="grid-title tn-text-bold tn-text-sm tn-margin-bottom-xs line-clamp-2">{{ item.title }}</view>
                <view class="grid-meta tn-text-xs tn-color-gray">
                  <view class="meta-date tn-margin-bottom-xs">
                    <text class="tn-icon-calendar tn-margin-right-xs"></text>
                    {{ item.dateRange }}
                  </view>
                  <view class="meta-location">
                    <text class="tn-icon-map tn-margin-right-xs"></text>
                    {{ item.location }}
                  </view>
                </view>
                <view class="grid-category tn-bg-gray--light tn-round-sm tn-padding-xs tn-text-xs tn-margin-top-xs inline-block">
                  {{ item.categoryName }}
                </view>
              </view>
            </view>
          </view>
          
          <!-- 空状态提示 -->
          <view class="empty-state tn-text-center tn-padding-xl tn-color-gray" v-if="filteredActivities.length === 0">
            <text class="tn-icon-empty-data tn-text-5xl tn-block tn-margin-bottom-sm"></text>
            <text>暂无相关校友会活动</text>
          </view>
          
          <!-- 加载更多 -->
          <view class="load-more tn-text-center tn-margin tn-padding" v-if="activities.length >= pageSize && filteredActivities.length > 0">
            <tn-loading :loading="loading" size="sm" :text="loading ? '加载中...' : '加载更多'"></tn-loading>
          </view>

        </view>

        <!-- 筛选面板 -->
        <view class="filter-panel" v-if="showFilter">
          <view class="filter-content">
            <view class="filter-section">
              <view class="filter-label">活动状态</view>
              <view class="filter-options">
                <view 
                  class="option-item" 
                  :class="{active: statusFilter === item.value}" 
                  v-for="(item, index) in statusOptions" 
                  :key="index"
                  @click="statusFilter = item.value">
                  <text>{{ item.label }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 已报名活动列表 -->
        <view class="activity-items">
          <view 
            v-for="(item, index) in filteredActivities" 
            :key="index" 
            class="activity-item"
            @click="tn('/circlePages/details', {id: item.id})">
            <!-- 图片区域 -->
            <view class="item-image">
              <image :src="item.coverImage" mode="aspectFill" class="cover-image"></image>
              <view class="image-overlay"></view>
              <!-- 活动状态标签 -->
              <view class="activity-tag">
                <text class="tag-dot"></text>
                <text class="tag-text">{{ getTagText(item.status) }}</text>
              </view>
            </view>

            <!-- 内容信息 -->
            <view class="item-info">
              <view class="info-title">{{ item.title }}</view>
              
              <view class="info-meta">
                <view class="meta-item">
                  <text class="meta-icon tn-icon-calendar"></text>
                  <text class="meta-text">{{ item.dateRange }}</text>
                </view>
                <view class="meta-item">
                  <text class="meta-icon tn-icon-map"></text>
                  <text class="meta-text">{{ item.location }}</text>
                </view>
              </view>

              <view class="info-footer">
                <view class="footer-left">
                  <view class="participant-info">
                    <text class="participant-icon tn-icon-people"></text>
                    <text class="participant-text">{{ item.participantCount }}人参与</text>
                  </view>
                </view>
                <view class="footer-right">
                  <view class="category-tag">
                    <text>{{ item.categoryName }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 空状态提示 -->
        <view class="empty-state" v-if="filteredActivities.length === 0">
          <view class="empty-icon">
            <text class="tn-icon-empty-data"></text>
          </view>
          <view class="empty-text">暂无校友会活动</view>
          <view class="empty-tip">快去报名参加活动吧~</view>
        </view>
      </view>
    </view>

    <!-- 其他标签页内容 -->
    <view class="" v-if="current==1">
      <view class="tn-margin-top tn-margin-bottom" :style="{paddingTop: vuex_custom_bar_height + 40 + 'px'}"> 
        <view class="tn-text-center" style="font-size: 180rpx;padding-top: 15vh;">
          <text class="tn-icon-activity tn-color-gray--disabled"></text>
        </view>
        <view class="tn-text-center tn-color-gray tn-text-base">我参与的校友会活动</view>
      </view>
    </view>

    <view class="" v-if="current==2">
      <view class="tn-margin-top tn-margin-bottom" :style="{paddingTop: vuex_custom_bar_height + 40 + 'px'}"> 
        <view class="tn-text-center" style="font-size: 180rpx;padding-top: 15vh;">
          <text class="tn-icon-favorite tn-color-gray--disabled"></text>
        </view>
        <view class="tn-text-center tn-color-gray tn-text-base">我收藏的校友会活动</view>
      </view>
    </view>

    <view class="" v-if="current==3">
      <view class="tn-margin-top tn-margin-bottom" :style="{paddingTop: vuex_custom_bar_height + 40 + 'px'}"> 
        <view class="tn-text-center" style="font-size: 180rpx;padding-top: 15vh;">
          <text class="tn-icon-clock tn-color-gray--disabled"></text>
        </view>
        <view class="tn-text-center tn-color-gray tn-text-base">历史校友会活动</view>
      </view>
    </view>

    <view class="" v-if="current==4">
      <view class="tn-margin-top tn-margin-bottom" :style="{paddingTop: vuex_custom_bar_height + 40 + 'px'}"> 
        <view class="tn-text-center" style="font-size: 180rpx;padding-top: 15vh;">
          <text class="tn-icon-create tn-color-gray--disabled"></text>
        </view>
        <view class="tn-text-center tn-color-gray tn-text-base">发起校友会活动</view>
      </view>
    </view>

    <view class="" v-if="current==5">
      <view class="tn-margin-top tn-margin-bottom" :style="{paddingTop: vuex_custom_bar_height + 40 + 'px'}"> 
        <view class="tn-text-center" style="font-size: 180rpx;padding-top: 15vh;">
          <text class="tn-icon-settings tn-color-gray--disabled"></text>
        </view>
        <view class="tn-text-center tn-color-gray tn-text-base">校友会活动设置</view>
      </view>
    </view>

    <view class='tn-tabbar-height'></view>
  </view>
</template>

<script>
export default {
  name: 'Preferred',
  data() {
    return {
      current: 0,
      scrollList: [
        {name: '我已报名的活动', count: '3'},
        {name: '我的参与'},
        {name: '我的收藏'},
        {name: '历史活动'},
        {name: '发起活动'},
        {name: '活动设置'}
      ],
      statusOptions: [
        {value: 'all', label: '全部'},
        {value: 'upcoming', label: '未开始'},
        {value: 'ongoing', label: '活动中'},
        {value: 'ended', label: '已结束'}
      ],
      statusFilter: 'all',
      activities: [
        {
          id: 1,
          title: '2024届校友返校日活动',
          coverImage: '../static/hd1.png',
          dateRange: '2024-06-15至2024-06-16',
          location: '吉林农科院东校区',
          participantCount: 238,
          status: 'upcoming',
          categoryName: '返校活动',
          isRegistered: true
        },
        {
          id: 2,
          title: '农业科技行业校友交流会',
          coverImage: '../static/hd1.png',
          dateRange: '2024-05-20至2024-05-20',
          location: '学院学术报告厅',
          participantCount: 156,
          status: 'ongoing',
          categoryName: '行业交流',
          isRegistered: true
        },
        {
          id: 3,
          title: '校友企业校园招聘专场',
          coverImage: '../static/hd1.png',
          dateRange: '2024-04-10至2024-04-10',
          location: '学院体育馆',
          participantCount: 320,
          status: 'ended',
          categoryName: '招聘求职',
          isRegistered: false
        },
        {
          id: 4,
          title: '校友会奖学金颁奖仪式',
          coverImage: '../static/hd1.png',
          dateRange: '2024-09-30至2024-09-30',
          location: '学院大礼堂',
          participantCount: 89,
          status: 'upcoming',
          categoryName: '表彰活动',
          isRegistered: true
        }
      ],
      showFilter: false
    }
  },
  computed: {
    filteredActivities() {
      return this.activities.filter(activity => {
        if (!activity.isRegistered) return false;
        if (this.statusFilter !== 'all' && activity.status !== this.statusFilter) return false;
        return true;
      });
    }
  },
  methods: {
    tabChange(index) {
      this.current = index;
    },
    filterByStatus(status) {
      this.statusFilter = status;
      this.showFilter = false;
    },
    getTagText(status) {
      switch(status) {
        case 'ongoing': return '活动中';
        case 'upcoming': return '未开始';
        case 'ended': return '已结束';
        default: return '';
      }
    },
    getTagClass(status) {
      switch(status) {
        case 'ongoing': return 'tag-ongoing';
        case 'upcoming': return 'tag-upcoming';
        case 'ended': return 'tag-ended';
        default: return '';
      }
    },
    tn(url, params = {}) {
      const query = Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
      const fullUrl = query ? `${url}?${query}` : url;
      uni.navigateTo({ url: fullUrl });
    },
    goBack() {
      uni.navigateBack({ delta: 1 });
    }
  }
}
</script>

<style lang="scss" scoped>
/* 导航栏返回按钮 */
.tn-custom-nav-bar__back {
  width: 60%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  font-size: 18px;
  backdrop-filter: blur(10rpx);
  
  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }
}

/* 页面背景 */
.template-preferred {
  background: linear-gradient(180deg, #F7F9FC 0%, #FFFFFF 100%);
  min-height: 100vh;
}

.tn-tabbar-height {
  min-height: 120rpx;
  height: calc(140rpx + env(safe-area-inset-bottom) / 2);
}

/* 页面头部 */
.page-header {
  padding: 30rpx 30rpx 20rpx;
  margin-bottom: 20rpx;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-title-wrap {
  flex: 1;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #1A1A1A;
  margin-bottom: 8rpx;
  letter-spacing: 1rpx;
}

.header-subtitle {
  font-size: 24rpx;
  color: #999;
}

.header-filter-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 12rpx 24rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.95);
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
  }
}

.filter-icon {
  font-size: 28rpx;
  color: #4285F4;
}

.filter-text {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

/* 筛选面板 */
.filter-panel {
  margin: 0 30rpx 30rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  overflow: hidden;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.filter-content {
  padding: 30rpx;
}

.filter-section {
  margin-bottom: 20rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.filter-label {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 20rpx;
  font-weight: 500;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.option-item {
  padding: 12rpx 28rpx;
  border-radius: 24rpx;
  font-size: 26rpx;
  background: #F5F7FA;
  color: #666;
  transition: all 0.3s ease;
  border: 2rpx solid transparent;
  
  &:active {
    transform: scale(0.95);
  }
  
  &.active {
    background: linear-gradient(135deg, #4285F4 0%, #34A853 100%);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: 0 4rpx 12rpx rgba(66, 133, 244, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
  }
}

/* 活动列表 */
.activity-list {
  padding-top: 0;
}

.activity-items {
  padding: 0 30rpx;
}

.activity-item {
  background: #FFFFFF;
  border-radius: 24rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  position: relative;
  
  &:active {
    transform: translateY(-4rpx);
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.12);
  }
  
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24rpx;
    padding: 2rpx;
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.1), rgba(52, 168, 83, 0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  &:active::after {
    opacity: 1;
  }
}

/* 图片区域 */
.item-image {
  width: 100%;
  height: 360rpx;
  position: relative;
  overflow: hidden;
}

.cover-image {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.activity-item:active .cover-image {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
  pointer-events: none;
}

/* 活动状态标签 */
.activity-tag {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 8rpx 18rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: 600;
  z-index: 2;
  backdrop-filter: blur(10rpx);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
}

.tag-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  display: inline-block;
}

.tag-text {
  font-size: 22rpx;
}

.tag-ongoing {
  background: rgba(0, 122, 255, 0.9);
  color: #FFFFFF;
  
  .tag-dot {
    background: #FFFFFF;
    box-shadow: 0 0 8rpx rgba(255, 255, 255, 0.8);
  }
}

.tag-upcoming {
  background: rgba(0, 200, 83, 0.9);
  color: #FFFFFF;
  
  .tag-dot {
    background: #FFFFFF;
    box-shadow: 0 0 8rpx rgba(255, 255, 255, 0.8);
  }
}

.tag-ended {
  background: rgba(153, 153, 153, 0.9);
  color: #FFFFFF;
  
  .tag-dot {
    background: #FFFFFF;
    box-shadow: 0 0 8rpx rgba(255, 255, 255, 0.8);
  }
}

/* 内容信息 */
.item-info {
  padding: 30rpx;
}

.info-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1A1A1A;
  margin-bottom: 24rpx;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.info-meta {
  margin-bottom: 24rpx;
}

.meta-item {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.meta-icon {
  font-size: 24rpx;
  color: #999;
  margin-right: 12rpx;
  width: 32rpx;
  text-align: center;
}

.meta-text {
  font-size: 26rpx;
  color: #666;
  flex: 1;
}

.info-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24rpx;
  border-top: 1rpx solid #F0F0F0;
}

.footer-left {
  flex: 1;
}

.participant-info {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.participant-icon {
  font-size: 24rpx;
  color: #4285F4;
}

.participant-text {
  font-size: 24rpx;
  color: #999;
}

.footer-right {
  flex-shrink: 0;
}

.category-tag {
  padding: 6rpx 18rpx;
  background: linear-gradient(135deg, #F5F7FA 0%, #E8F0F5 100%);
  border-radius: 16rpx;
  border: 1rpx solid #E0E0E0;
  
  text {
    font-size: 22rpx;
    color: #666;
    font-weight: 500;
  }
}

/* 空状态 */
.empty-state {
  padding: 120rpx 30rpx;
  text-align: center;
}

.empty-icon {
  font-size: 160rpx;
  color: #D0D0D0;
  margin-bottom: 40rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 30rpx;
  color: #999;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.empty-tip {
  font-size: 24rpx;
  color: #BBB;
}

/* 活动列表顶部间距 */
.activity-list {
  padding-top: 30rpx;
}

/* 响应式优化 */
@media (max-width: 750rpx) {
  .item-image {
    height: 320rpx;
  }
  
  .info-title {
    font-size: 30rpx;
  }
}
</style>
